<template>
  <div class="echarts_box">
    <div class="echarts" ref="echarts_box"></div>
    <div class="label2">{{ label }}</div>

    <!---------------------- 无数据是显示 ---------------------->
    <!-- <Nodata class="Nodata" v-show="data.length == 0"></Nodata> -->
  </div>
</template>


<script>
import { mapState, mapActions, mapGetters } from "vuex";
import fontSize from "@/modules/fontSize";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return {
          allNum: 0,
          falseAlarmRatio: 0,
        };
      },
    },
    fontSize: {
      type: String | Number,
      default: 1,
    },
    label: {
      type: String,
      default: "",
    },
    // data: {
    //   // 返回的数据
    //   type: Array | Object,
    //   default: function () {
    //     return [];
    //   },
    // },
  },
  computed: {},
  watch: {
    fontSize: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
  },
  data() {
    return {
      temp: 0,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          var _this = this;
          // let num = (this.number[0] / this.number[1]) * 100;
          // num = num.toFixed(1);
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          let option = {
            title: {
              text: this.data.allNum + "次", //主标题文本，'\n'指定换行
              // link: "", //主标题文本超链接,默认值true
              // target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
              x: "center", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
              y: "74%", //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）

              borderColor: "#ccc", //标题边框颜色,默认'#ccc'
              // borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
              padding: [5, 13, 5, 13], //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
              itemGap: 0, //主副标题纵向间隔，单位px，默认为10
              textStyle: {
                //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                // fontFamily: "Arial, Verdana, sans...",
                fontSize: fontSize.fontSize(0.082),
                // fontStyle: "normal",
                // fontWeight: "normal",
                color: "#d4f0ff",
                // textShadowColor: "rgba(0,255,211,1)", //阴影颜色
                // textShadowBlur: "10", //阴影的宽度
                // textShadowOffsetX: "-1", //阴影向X偏移
                // textShadowOffsetY: "-1", //阴影向Y偏移
              },
            },
            series: [
              {
                name: "",
                type: "gauge",
                radius: "78%",
                splitNumber: 6,
                axisLine: {
                  lineStyle: {
                    color: [
                      [
                        _this.data.falseAlarmRatio / 100,
                        new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                            offset: 0.1,
                            color: "#0aa1e0",
                          },
                          {
                            offset: 1,
                            color: "#02ecf6",
                          },
                        ]),
                      ],
                      [1, "rgba(0,0,0,0)"],
                    ],
                    width: 23,
                  },
                },
                axisLabel: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                pointer: {
                  show: false,
                },
              },
              // {
              //   name: "外部刻度",
              //   type: "gauge",
              //   radius: "55%",
              //   min: 0, //最小刻度
              //   max: 100, //最大刻度
              //   splitNumber: 10, //刻度数量
              //   startAngle: 220,
              //   endAngle: -40,
              //   axisLine: {
              //     show: false,
              //   },
              //   //仪表盘轴线
              //   axisLabel: {
              //     show: false,
              //   },
              //   //刻度标签
              //   axisTick: {
              //     show: true,
              //     splitNumber: 6,
              //     lineStyle: {
              //       color: "#00faff", //用颜色渐变函数不起作用
              //       width: 1,
              //     },
              //     length: -5,
              //   },
              //   //刻度样式
              //   splitLine: {
              //     show: true,
              //     length: -8,
              //     lineStyle: {
              //       color: "#00faff", //用颜色渐变函数不起作用
              //       width: 1,
              //     },
              //   }, //分隔线样式
              //   detail: {
              //     show: false,
              //   },
              //   pointer: {
              //     show: false,
              //   },
              // },
              /*内部*/
              {
                type: "pie",
                radius: ["0", "59%"],
                z: 3,
                hoverAnimation: false,
                data: [
                  {
                    name: "",
                    value: _this.data.falseAlarmRatio,
                    itemStyle: {
                      normal: {
                        color: new _this.$echarts.graphic.LinearGradient(
                          0,
                          1,
                          0,
                          0,
                          [
                            {
                              offset: 0,
                              color: "#094885",
                            },
                            {
                              offset: 0.5,
                              color: "#094885",
                            },
                            {
                              offset: 1,
                              color: "#094885",
                            },
                          ]
                        ),
                      },
                    },
                    label: {
                      normal: {
                        rich: {
                          a: {
                            color: "#ffffff",
                            align: "center",
                            fontSize: fontSize.fontSize(0.13) * this.fontSize, //自适应大小,,
                          },
                        },
                        formatter: (params) => {
                          return "{a|" + params.value + "%" + "}";
                        },
                        position: "center",
                        show: true,
                      },
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                ],
              },
              /*外一层*/
              // {
              //   type: "pie",
              //   radius: "60%",
              //   avoidLabelOverlap: false,
              //   z: 1,
              //   hoverAnimation: false,
              //   label: {
              //     show: false,
              //   },
              //   labelLine: {
              //     show: false,
              //   },
              //   data: [
              //     {
              //       value: 1,
              //     },
              //   ],
              //   itemStyle: {
              //     normal: {
              //       color: "rgba(0,131,255,0.05)",
              //     },
              //   },
              // },
              //外二层圈
              {
                type: "pie",
                radius: "90%",
                avoidLabelOverlap: false,
                z: 0,
                hoverAnimation: false,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                data: [
                  {
                    value: 1,
                  },
                ],
                itemStyle: {
                  normal: {
                    color: "#094885",
                  },
                },
              },
            ],
          };

          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.echarts_box {
  width: 170px;
  height: 158px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0.5vh 0 0.3vh 0;
  position: relative;
  justify-content: space-between;
  .echarts {
    width: 100%;
    height: 80%;
  }
  .label2 {
    background: url("../../../assets/images/echarts/yuanjiao.png") center
      no-repeat;
    background-size: 50% 100%;

    height: 22px;
    width: 100%;
    font-size: 13px;
    font-family: Source Han Sans CN, Source Han Sans CN-Light;
    font-weight: 300;
    text-align: center;
    color: #03e6f5;
    line-height: 20px;
    margin-top: 3px;
    line-height: 22px;
  }
  @media screen and (max-width: 1200px) {
    .label2 {
      font-size: 12px !important;
    }
  }
}
@media screen and (max-width: 1000px) {
  .echarts_box {
    width: 160px;
    height: 150px;
    .label2 {
      position: relative;
     top: -5px;
    }
  }
}
</style>